<template>
  <div class="room-management">
    <div class="header">
      <h1>游戏房间</h1>
      <button @click="exitToHome" class="exit-btn">退出</button>
    </div>

    <!-- 创建房间 -->
    <div class="create-room card">
      <h2>创建新房间</h2>
      <button @click="createRoomHandler" class="btn-primary">创建</button>
    </div>

    <!-- 加入房间 -->
    <div class="join-room card">
      <h2>加入房间</h2>
      <input
          v-model="roomIdToJoin"
          placeholder="输入六位房间ID"
          class="input-field"
          maxlength="6"
          @keypress="handleNumberInput"
      />
      <button @click="joinRoomHandler" class="btn-primary">加入</button>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
import { useRoom } from "@/views/homeView/composables/useRoom.js";

export default {
  setup() {
    const router = useRouter();

    // 使用 useRoom 组合式函数
    const {
      createRoom,
      joinRoom,
    } = useRoom();

    // 响应式数据
    const roomIdToJoin = ref('');
    const errorMessage = ref('');

    // 输入验证：仅允许数字输入
    const handleNumberInput = (e) => {
      if (!/\d/.test(e.key)) e.preventDefault();
    };

    // 创建房间
    const createRoomHandler = () => {
      createRoom();
    };

    // 加入房间
    const joinRoomHandler = () => {
      const roomIdValue = roomIdToJoin.value.trim();
      if (!/^\d{6}$/.test(roomIdValue)) {
        ElMessage({
          message: '请输入6位数字房间号',
          type: 'error'
        });
        return;
      }
      joinRoom(roomIdValue);
    };

    // 退出到首页
    const exitToHome = () => {
      router.push('/home');
    };

    return {
      roomIdToJoin,
      errorMessage,
      createRoomHandler,
      joinRoomHandler,
      handleNumberInput,
      exitToHome
    };
  }
};
</script>

<style scoped>
.room-management {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  height: 100vh;
  color: white;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin-bottom: 20px;
}

.exit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(225, 50, 50, 0.7);
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.exit-btn:hover {
  background: rgba(225, 50, 50, 0.3);
}

.card {
  margin: 20px 0;
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 300px;
  text-align: center;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

h1, h2 {
  font-family: 'Arial', sans-serif;
  margin-bottom: 20px;
}

.input-field {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  outline: none;
  transition: background-color 0.3s ease;
}

.input-field:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

.btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 10px;
}

.btn-primary:hover {
  background: linear-gradient(90deg, #5a01a7 0%, #256efc 100%);
}

.error-message {
  color: #ff4444;
  margin-top: 10px;
  font-size: 14px;
}
</style>